<ng-container *ngIf="virtual else default">
  <!-- cdk-virtual-scroll-viewport高度塌陷，必须给cdk-virtual-scroll-viewport 设置高度。这里直接根据数据量设置高度(不让高度塌陷)，
              利用css中设置的最大高度和最小高度来限制实际的容器的高度 -->
  <cdk-virtual-scroll-viewport
    class="ti3-virtual-scroll-list-viewport"
    [itemSize]="itemSize"
    [ngStyle]="{'height': getVirtualScrollViewportHeight()}"
    [ngClass]="{'ti3-virtual-scroll-list-viewport-with-selectall': selectAll && multiple && options?.length > 0}"
  >
    <ul #ulRef tabindex="-1" class="ti3-drop-list-ul" [id]="appendId('list')">
      <ng-container *ngIf="selectAll && multiple && options?.length > 0">
        <ng-container *ngTemplateOutlet="selectAllTemplate"></ng-container>
      </ng-container>
      <!-- 分组的 list 不支持虚拟滚动 -->
      <ng-container *cdkVirtualFor="let option of options; let i = index">
        <ng-container *ngTemplateOutlet="optionTemplate; context:  {$implicit: option, index: i, liid: i}"></ng-container>
      </ng-container>
      <ng-container *ngIf="!options || options.length === 0">
        <ng-container *ngTemplateOutlet="nodatatemplate"></ng-container>
      </ng-container>
    </ul>
  </cdk-virtual-scroll-viewport>
  <section *ngIf="scrollLoadInfo.loading" class="ti3-list-scroll-to-bottom-loading-container"><ti-loading></ti-loading></section>
</ng-container>
<ng-template #default>
  <ul
    #ulRef
    tabindex="-1"
    *ngIf="options&&options.length > 0 else nodatatemplate"
    [ngClass]="{'ti3-dropdown-group':isGroup(options[0])}"
    class="ti3-drop-list-ul"
    [id]="appendId('list')"
  >
    <ng-container *ngIf="selectAll && multiple">
      <ng-container *ngTemplateOutlet="selectAllTemplate"></ng-container>
    </ng-container>
    <ng-container *ngFor="let option of options; let i = index">
      <ng-container *ngTemplateOutlet="optionTemplate; context:  {$implicit: option, index: i, liid: i}"> </ng-container>
      <ng-container *ngIf="showChildren">
        <ng-container *ngFor="let child of option.children; let j = index;let last = last;">
          <ng-container *ngTemplateOutlet="optionTemplate; context:  {$implicit: child, index: j, liid: i+'_'+j,last: last}">
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>
  </ul>
</ng-template>

<!-- no data模板 -->
<ng-template #nodatatemplate>
  <div class="ti3-dropdown-no-data" [innerHtml]="noDataText"></div>
</ng-template>
<!-- 分组和选项的模板 -->
<ng-template #optionTemplate let-item let-i="index" let-lid="liid" let-last="last"
  ><!--两层模板嵌套，有点难理解-->
  <li
    #liRefs
    [ngClass]="{'ti3-dropdown-group-list':isGroup(item),
                'ti3-dropdown-group-list-cascader': item.children && item.children.length > 0 && !showChildren,
                'ti3-dropdown-option':!isGroup(item),
                'ti3-dropdown-option-disabled': !isGroup(item)&&isDisabledFn(item),
                'ti3-dropdown-option-selected': !isGroup(item)&&!multiple&&isSelected(item),
                'ti3-dropdown-option-hover': !isGroup(item)&&item === hoverOption}"
    (click)="onClickItem($event, item)"
    (mouseenter)="onMouseenterItem($event, item)"
    [id]="appendId(lid)"
  >
    <section
      [tiTip]="item.tip"
      [tiTipPosition]="tipPosition"
      [tiTipHostEleX]="nativeElement"
      [tiTipMaxWidth]="tipMaxWidth"
      [tiTipContext]="item"
      class="ti3-overflow-padding"
    >
      <label
        *ngIf="multiple&&!isGroup(item)"
        class="ti3-icon ti3-icon-checkmark ti3-multi-select-checkbox"
        [ngClass]="{'ti3-multi-select-checkbox-selected': isSelected(item)}"
      >
      </label>
      <ng-container *ngIf="itemTemplate else labelTemplate">
        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i,last: last}"> </ng-container>
      </ng-container>
      <ng-template #labelTemplate><span [title]="item[labelKey]">{{item[labelKey]}}</span></ng-template>
    </section>
  </li>
</ng-template>
<!-- 多选全选项的模板 -->
<ng-template #selectAllTemplate>
  <li
    class="ti3-dropdown-option"
    [ngClass]="{'ti3-dropdown-option-hover': optionSelectAll === hoverOption}"
    (click)="onClickItem($event, optionSelectAll)"
    (mouseenter)="onMouseenterItem($event, optionSelectAll)"
    [id]="appendId('select_all')"
  >
    <section class="ti3-overflow-padding">
      <label
        class="ti3-icon ti3-icon-checkmark ti3-multi-select-checkbox"
        [ngClass]="{'ti3-multi-select-checkbox-selected': selectAllState === true,
                                        'ti3-multi-select-checkbox-indeterminate': selectAllState === null}"
      >
      </label>
      <span [title]="selectAllText">{{selectAllText}}</span>
    </section>
  </li>
</ng-template>
